<template>
	<div class="box">
	
		<div class="fourth">
			<div class="head center">
				<div class="jbt"></div>
			</div>
			<div class="cont center" style="padding: 0 10px;">
				<div class="name" style="padding-top: 60px;" v-if='infoData==""'>请出示二维码，获取祭拜排队号</div>
				<div class="name" style="padding-top: 60px;" v-if='infoData!=""'>
					<div class="colorefd f28">祭拜对象：{{infoData.data.deceasedName_0}} {{infoData.data.deceasedName_1?infoData.data.deceasedName_1:''}}</div>
					<div class="colorefd f28 mgt-10">预约人：{{infoData.data.customerName}}</div>
					<div class='pdt-30 pdb-30' style="color: red;">{{infoData.msg}}</div>
					<div class="colorefd mgt-10">祭拜房间号：{{infoData.data.roomId}}号房间</div>
					<div class="colorefd mgt-10">排队号号：{{infoData.data.serialNum}}号</div>
					<div class="colorefd mgt-10">预计开始时间：{{infoData.data.time}}</div>
					<div class="colorefd f20 mgt-20" style="color: red;">请下一位扫码者在{{times}}秒后操作</div>
				</div>
			</div>
			
				
		</div>
	</div>
</template>

<script>
	import {
		format,
		ossUri
	} from '../../utils/tool.js';


	export default {
		name: 'main',
		data() {
			return {
				inputValue: '',
				infoData:[],
				times:3,
			};
		},
		activated() {

		},
		created() {
			this.keyup();
		},
		methods: {
			keyup() {
				let that = this;
					document.onkeydown = function(event) {
						console.log(event)
						if (event.key != 'Enter') {
							that.inputValue = that.inputValue + event.key
						} else if(event.key == 'Enter'&&that.times==3) {
							console.log(that.inputValue)
							that.$api.reserve.signInOne({
								signCode: that.inputValue
							}).then(d => {
								if (d && d.code == 1) { 
									if(d.data.deceasedName_0&&d.data.deceasedName_0!=''){
										d.data.deceasedName_0=that.changName(d.data.deceasedName_0)
									}
									if(d.data.deceasedName_1&&d.data.deceasedName_1!=''){
										d.data.deceasedName_1=that.changName(d.data.deceasedName_1)
									}
									that.infoData=d;
									// that.$notify({
									// 	type: 'success',
									// 	message: '签到成功'
									// })
									setTimeout(function(){
										that.infoData='';
										that.inputValue='';
									},3000)
									let imgo=setInterval(function(){
										if(that.times!=0){
											that.times=that.times-1;
										}else{
											that.times=3;
											clearInterval(imgo);
										}
									},1000)
								} else {
									that.inputValue = '';
									that.$notify({
										type: 'danger',
										message: d.msg
									})
								}
							})
						}
					}
				

			},
			changName(d){
				let name ='';
				if(d.length>2){
					let fir = d;
					let sec =d;
					name = fir.slice(0,1)+'*'+sec.slice(sec.length-1,sec.length);
				}else if(d.length==2){
					let fir = d;
					name = fir.slice(0,1)+'*';
				}
				return name;
			}
			
			
		},
		components: {

		}
	};
</script>

<style lang="less">
	.box {
		background-color: #98BFE0;
		height: 100%;
	}
	
	.head {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	.jbt {
		width: 90%;
		margin: auto;
		text-align: center;
		padding: 20px 0;
		// background: url(../../img/rommbg.png);
		// background-size: 100% 100%;
		color: #fff;
	}
	
	.cont {
		height: 550px;
		width: 90%;
		margin: auto;
		border-radius: 35px;
		background: linear-gradient(to bottom, #00A7EE 0%,#0065CE 100%);
		background-color: #0162a8;
	}
	.dqjb{
		width: 85%;
		margin: auto;
		padding: 15px 15px 15px 15px;
		background-color: #005072;
		color: #fff;
	}
	.zbjb{
		width: 85%;
		margin: auto;
		padding: 15px 15px 15px 15px;
		background-color: #8B6F22;
		border-top: 2px solid #fff;
		color: #fff;
	}
	.name {
		color: #efdc00;
		font-size: 30px;
		padding-top: 80px;
	}
	.jbs{
		width: 210px;
		height: 55px;
		line-height: 55px;
		border-radius: 9px;
		background-color: #009AF0;
	}
	.zbs{
		width: 210px;
		height: 55px;
		line-height: 55px;
		border-radius: 9px;
		background-color: #D5910F;
	}
	.jb {
		color: #efdc00;
		font-size: 30px;
		padding-top: 30px;
	}
	
	.foot {
		width: 90%;
		margin: auto;
		padding: 5px;
		background-color: #FEF6E6;
		color: #D84040;
		font-size: 14px;
	}
	
	.doun {
		color: #FF4444;
		font-size: 28px;
		vertical-align: baseline;
	}
	.colorefd{
		color:#efdc00
	}
</style>
